<!--  -->
<template>
    <div class="hot-order">
        <template v-for="(item,index) in hotList">
            <div class="hot-item show_public f-12" :key="index" @click="toActivity(item)">
                <div class="f-14">分享 {{item.name}} 可免费获得此奖品</div>
                <div class="flex product-wrapper">
                    <img class="product-img" :src="item.child.image" alt="">
                    <div class="info">
                        <div class="product-name ellipsis">{{item.child.name}}</div>
                        <template v-if="item.open_status==0">
                            <div
                                class="mt-14 color-gray"
                            >距离活动结束还差{{parseInt(item.power)-parseInt(item.progress)}}能量</div>
                        </template>
                        <template v-else-if="item.open_status==1">
                            <div class="mt-14 color-gray">能量集满等待开奖</div>
                        </template>
                        <template v-else>
                            <div class="mt-14 color-gray">活动中奖人:{{item.child.nickname}}</div>
                            <div class="mt-4 color-gray">推荐人:{{item.child.pid_nickname||'中奖者无推荐人'}}</div>
                        </template>
                        <div class="price">市场价:￥{{item.child.price}}</div>
                    </div>
                </div>
               <div class="bottom flex justify-between aligin-center" v-if="item.open_status!=2">
                    <div class="color-gray">你离奖品只差点击分享按钮~</div>
                    <div
                        class="share flex aligin-center justify-center"
                        @click.stop="$emit('toShareReward',item)"
                    >
                        <span class="share-icon"></span>
                        <span class="share-title">分享</span>
                    </div>
                </div>
            </div>
        </template>
        <div class="no-data" v-if="hotList.length==0"></div>
    </div>
</template>

<script>
export default {
  props: {
    hotList: {
      type: Array,
      default: () => {
        return [];
      },
      required: true
    }
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    toActivity(item) {
        this.$router.push({
            name: "detail",
            params: { id: item.id },
            query: { pid: this.$route.query.pid }
          });
    }
  },
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.hot-item {
  padding: 11px 17px;
  margin-bottom: 13px;
  .share {
    float: right;
    width: 106px;
    height: 23px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 4px 0px rgba(222, 222, 222, 0.56);
    border-radius: 10px;
    .share-icon {
      height: 13px;
      width: 13px;
      background: url("../assets/imgs/care.png");
      background-size: 100% 100%;
    }
    .share-title {
      margin-left: 5px;
      color: #ff6224;
    }
  }
  .product-wrapper {
    margin-top: 13px;
    border-radius: 3px;
    background: rgba(248, 248, 248, 1);
  }
  .product-img {
    height: 100px;
    width: 100px;
    border-radius: 3px;
  }
  .info {
    flex: 1;
    padding: 13px 11px 18px;
    height: 100px;
    width: 210px;
    box-sizing: border-box;
    .product-name {
      width: 210px;
    }
    .price {
      margin-top: 12px;
      color: #ff966e;
    }
  }
  .bottom {
    padding: 21px 5px 17px;
  }
}
</style>